<template>
	<view class="product">
		<view class="btn1">
			<!-- navigatorurl="/pages/product/addProduct"> -->
			<button @tap="skip('/pages/product/addProduct')">添加</button>
			<!-- </navigator> -->
			<button @click="open">筛选</button>
			<button @click="reset">重置</button>
			<button @click="open1">更多操作</button>
		</view>
		<view class="product_list" v-if="showList.length>0">
			<view v-for="(item, index) in showList" :key="index" class="product_list_item">
				<view class="" @tap="
            skip(
              `/pages/product/product_details?productDetail=` +
                encodeURIComponent(JSON.stringify(item))
            )
          ">
					<view class="name">{{ item.proId }}</view>
					<view class="price">{{ item.proPrice }}元</view>
					<image mode="aspectFit" :src="resBaseUrl + 'user/right.png'" alt="" />
				</view>
				<!-- <view class="">
					<view class="temp">
						<u-number-box button-size="36" color="#ffffff" bgColor="#2979ff" iconStyle="color: #fff"
							v-model="tempValue[index]">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<text slot="input" style="text-align: center;font-size: 3
              8rpx;" class="input">{{
                tempValue[index]
              }}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
					<button @tap="
              skip(`/pages/product/seal?mid=${item.mid}&proId=${item.proId}`)
            ">
						打印
					</button>
				</view> -->
				<!-- <navigator url="/pages/product/product_details"> -->
				<!-- </navigator> -->
			</view>
		</view>
		<view v-else><u-divider textSize="34" text="暂无数据"></u-divider></view>
		<!-- <view style="margin: 40rpx auto; width: 100%; text-align: center;" v-else>~ 暂无数据 ~</view> -->
		<u-popup :show="show" mode="bottom" :round="20" @close="close" @open="open">
			<view class="toast">
				<view class="form">
					<view class="select">
						<view class="text"> <text>*</text>货号: </view>
						<view style="display: flex;align-items: center;" class="">
							<input v-model="proId" type="text" placeholder="请输入货号" />
							<view @tap="open2" class="seacchBtn">
								选择
							</view>
						</view>
					</view>
					<!--
					<view class="select">
						<view class="text"> <text>*</text>颜色: </view>
						<input v-model="proColor" type="text" placeholder="请输入颜色" />
					</view> -->
					<!-- view class="select">
						<view class="text"> <text>*</text>尺码: </view>
						<input v-model="proSize" type="text" placeholder="请输入尺码" />
					</view> -->
				</view>
				<view class="btn">
					<button @tap="search">查询</button>
				</view>
			</view>
		</u-popup>
		<Prop @close="close2" ref="child" @saveUser="saveUser" />
		<u-popup :show="show1" mode="bottom" :round="20" @close="close1" @open="open1">
			<view class="toast1">
				<view class="top">
					<!-- <view @tap="skip('/pages/product/addProduct')"> 添加产品 </view> -->
					<view @tap="setShow"> 产品显示设置 </view>
				</view>

				<view class="button" @tap="show1 = false"> 取消 </view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import Prop from "../../components/prop.vue"
	import {
		resBaseUrl
	} from "../../utils";

	export default {
		data() {
			const _this = this
			return {
				resBaseUrl: _this.resBaseUrl,
				tempValue: [],
				show: false,
				show1: false,
				productList: [],
				productListCopy: [],
				showList: [],
				pageSize: 999,
				pageNo: 1,
				proId: "",
				proColor: "",
				proSize: "",
			};
		},
		components: {
			Prop
		},
		methods: {
			close2() {
				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
			},

			reset() {
				this.proId = ''
				this.search()
			},
			saveUser(data) {
				this.proId = data.proId;
				this.$api
					.qryProductInfoApi({
						cid: this.cid,
						proId: this.proId
					})
					.then((res) => {
						if (res.code == 200) {
							this.orderNum = res.result.list[0].proNum;
							this.price = res.result.list[0].proPrice;
							this.remark = res.result.list[0].remark;
							this.proSku = res.result.list[0].proSku;
							this.realPrice =Math.floor(this.orderNum * this.price*100)/100 ;
							// console.log(this.price)
						}
					});
				this.$refs.child.close();
			},
			open2() {
				this.$refs.child.open();
				// console.log(this.$refs.input.focus())
				// this.focus = true
				// console.log(this.focus)
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			open1() {
				this.show1 = true;
			},
			close1() {
				this.show1 = false;
			},
			getList(query) {
				this.$api.productListApi({
					data: query
				}).then((res) => {
					if (res.code == 200) {
						this.productList = res.result.list
						this.showList = res.result.list
						this.tempValue = this.productList.map((item) => 10);
					}
				});
			},
			search() {
				this.getList({
					pageSize: 999,
					pageNo: 1,
					proId: this.proId,
					// proColor: this.proColor,
					// proSize: this.proSize,
				});
				// this.showList = this.productList.filter((item) => {
				//   return (
				//     item.proId.indexOf(this.proId) != -1 &&
				//     item.proColor.indexOf(this.proColor) != -1 &&
				//     item.proSize.indexOf(this.proSize) != -1
				//   );
				// });
				this.show = false;
			},
			setShow() {
				uni.navigateTo({
					url: "/pages/product/show",
				});
				this.show1 = false;
			},
		},
		onShow() {
			this.show1 = false
			this.getList({
				pageSize: 999,
				pageNo: 1
			});
		},
		onReachBottom() {
			if (this.productList.length == this.pageSize * this.pageNo) {
				this.pageNo++;
				this.$api
					.productListApi({
						data: {
							pageSize: this.pageSize,
							pageNo: this.pageNo
						}
					})
					.then((res) => {
						if (res.code == 200) {
							res.result.list.forEach((item) => {
								this.productList = [...this.productList, ...res.result.list];
								this.productListCopy = this.productList;
							});
						}
					});
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}

	.product {
		padding: 30rpx;
		background-color: #f1f1f1;
		height: 100vh;

		.btn1 {
			display: flex;

			button {
				height: 58rpx;
				line-height: 58rpx;
				border-radius: 28rpx;
				background-color: #fe3430;
				color: #fff;
				margin: 0 10rpx 0 0;
			}
		}

		.product_list {
			margin-top: 16rpx;

			.product_list_item {
				// background-color: #fac;
				border-radius: 20rpx;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				// padding: 30rpx 24rpx;
				margin: 30rpx 0;
				/* #ifndef MP */
				&>:nth-child(1) {
					width: 100%;
					background-color: #fff;
					padding: 20rpx;
					border-radius: 29rpx;
				}
				/* #endif */
				&>view {
					/* #ifdef MP-WEIXIN */
					width: 100%;
					background-color: #fff;
					padding: 20rpx;
					border-radius: 29rpx;
					/* #endif */
					display: flex;
					column-gap: 20rpx;
					justify-content: space-around;
					align-items: center;
				}

				.name {
					// font-size: 12rpx;
					flex: 1;
					// width: 80%;
					font-weight: 600;
					word-wrap: break-word;
					word-break: break-all;
				}

				button {
					margin-left: 10rpx;
					color: #fff;
					width: 124rpx;
					line-height: 48rpx;
					height: 48rpx;
					background: #fe3430;
					border-radius: 24rpx;
				}

				image {
					width: 12rpx;
					height: 24rpx;
				}

				.price {
					white-space: nowrap;
					// width: 100rpx;
					color: #bdbdbd;
				}
			}
		}

		.toast {
			padding: 16rpx 49rpx;
			border-radius: 29rpx;

			.btn {
				display: flex;
				justify-content: space-around;
				padding: 30rpx 0;

				button {
					width: 463rpx;
					height: 97rpx;
					background: rgba(254, 52, 48, 0);
					border: 3rpx solid #272727;
					border-radius: 49rpx;
					line-height: 97rpx;
				}
			}

			.form {
				border-bottom: 1px solid #f1f1f1;
				padding-bottom: 30rpx;

				.select {
					text-indent: 1em;

					.text {
						margin: 20rpx 0;
						color: #bdbdbd;

						text {
							color: #fe3430;
						}
					}

					input {
						height: 94rpx;
						background: #f2f2f2;
						border-radius: 47rpx;
					}

					.input {
						display: flex;
						align-items: center;
						justify-content: space-between;

						input {
							width: 271rpx;
						}

						text {
							text-align: left;
						}
					}
				}
			}
		}

		.toast1 {
			padding: 16rpx 0rpx;
			// border-radius: 29rpx;
			background: #787878;
			text-align: center;

			.top {
				border-radius: 10rpx;
				background: #fff;
				margin-bottom: 20rpx;

				view {
					height: 100rpx;
					font-size: 40rpx;
					line-height: 100rpx;

					&:first-child {
						border-bottom: 1px solid #bdbdbd;
					}
				}
			}

			.button {
				border-radius: 10rpx;
				background: #fff;
				height: 100rpx;
				font-size: 40rpx;
				line-height: 100rpx;
			}
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #e6e6e6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		background-color: #ff0000;
		align-items: center;
		color: #fff;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #ff0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.u-number-box__slot {
		background-color: #fff;
		color: antiquewhite;

		span {
			background-color: #fac !important;
		}
	}

	.seacchBtn {
		height: 88rpx;
		line-height: 88rpx;
		background: #fe3430;
		border-radius: 49rpx;
		color: #fff;
		margin-left: 20rpx;
		margin-right: 10rpx;
		width: 200rpx;
		font-size: 34rpx;
		text-align: center;
	}
</style>
